<!--
 * @FilePath     : /study_code/jquery/api-scrollTop.html
 * @Description  : .scrollTop() 获取元素的 滚动尺寸
 * @Date         : 2025-04-21 09:29:51
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-21 09:30:02
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <!-- <link rel="stylesheet" href="" /> -->
  </head>
  <body>
    <div style="border: 1px solid black; width: 200px; height: 200px; overflow: auto">
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text. This is some text. This is some text.
      This is some text.
    </div>
    <button class="btn1">获得 scrollbar top offset</button>
    <p>试着移动滚动条，然后再次点击按钮。</p>

    <button id="btn2">使匹配元素滚动到 200位置</button>

    <script src="/jquery/dist/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $('.btn1').click(function () {
          alert($('div').scrollTop() + ' px')
        })

        // 设置滚动条垂直位置
        $('#btn2').click(function () {
          $('div').scrollTop(200)
        })
      })
    </script>
  </body>
</html>
